<template>
	<div class="node-wrap">
		<div class="node-wrap-box start-node" @click="show">
			<div class="title" style="background: #576a95;">
				<el-icon class="icon"><el-icon-user-filled /></el-icon>
				<span>{{ nodeConfig.nodeName }}</span>
			</div>
			<div class="content">
				<span>{{ toText(nodeConfig) }}</span>
			</div>
		</div>
		<add-node v-model="nodeConfig.childNode" :parent-data="nodeConfig"></add-node>
		<el-drawer title="发起人" v-model="drawer" destroy-on-close append-to-body :size="500">
			<template #header>
				<div class="node-wrap-drawer__title">
					<label @click="editTitle" v-if="!isEditTitle">{{form.nodeName}}<el-icon class="node-wrap-drawer__title-edit"><el-icon-edit /></el-icon></label>
					<el-input v-if="isEditTitle" ref="nodeTitle" v-model="form.nodeName" clearable @blur="saveTitle" @keyup.enter="saveTitle"></el-input>
				</div>
			</template>
			<el-container>
				<el-main style="padding:0 20px 20px 20px">
					<el-form label-position="top">
						<el-tabs model-value="first" class="demo-tabs" @tab-click="notice">
							<el-tab-pane label="基础设置" name="first">
						         <el-form-item label="谁可以发起此审批">
						         	<el-button type="primary" icon="el-icon-plus" round @click="selectHandle(2, form.nodeRoleList)">选择角色</el-button>
						         	<div class="tags-list">
						         		<el-tag v-for="(role, index) in form.nodeRoleList" :key="role.id" type="info" closable @close="delRole(index)">{{role.name}}</el-tag>
						         	</div>
						         </el-form-item>
						         <el-alert v-if="form.nodeRoleList.length==0" title="不指定则默认所有人都可发起此审批" type="info" :closable="false"/>
							</el-tab-pane>
							<el-tab-pane label="高级设置" name="second">
								<el-form-item label="按钮配置">
									<div class="button-call">
										<el-checkbox v-model="form.submitBtn" disabled label="提交"></el-checkbox>
										<el-input v-model="form.submitBtnText"/>
									</div>
									<div class="button-call">
										<el-checkbox v-model="form.draftBtn" disabled label="草稿"></el-checkbox>
										<el-input v-model="form.draftBtnText"/>
									</div>
									<div class="button-call">
										<el-checkbox v-model="form.recallBtn" label="撤回"></el-checkbox>
										<el-input v-model="form.recallBtnText"/>
									</div>
									<div class="button-call">
										<el-checkbox v-model="form.pressBtn" label="催办"></el-checkbox>
										<el-input v-model="form.pressBtnText"/>
									</div>
									<div class="button-call">
										<el-checkbox v-model="form.printBtn" label="打印"></el-checkbox>
										<el-input v-model="form.printBtnText"/>
									</div>
								</el-form-item>
							</el-tab-pane>
							<el-tab-pane label="表单设置" name="third">
								<el-form-item label="填报表单">
									<el-select v-model="form.nodeForm"  placeholder="选择填报表单,用于审核时填写">
										<el-option :key="item.id" v-for="item in nodeFormList" :label="item.formName" :value="item.id"/>
									</el-select>
								</el-form-item>
								<el-form-item label="数据表单">
									<el-select v-model="form.dataForm" @change="changeDataForm"  placeholder="选择数据表单,用于展示表单数据">
										<el-option :key="item.id" v-for="item in dataFormList" :label="item.formName" :value="item.id"/>
									</el-select>
								</el-form-item>
							</el-tab-pane>
							<el-tab-pane label="节点通知" name="fifth">
								<el-form-item label="流程待办">
									<el-select style="width: 100%" v-model="form.waitMsg">
										<el-option
											v-for="item in msgConfig"
											:key="item.value"
											:label="item.label"
											:value="item.value"
										/>
									</el-select>
								</el-form-item>
								<el-form-item label="消息模板" v-if="form.waitMsg=='on'">
									<el-select style="width: 100%" v-model="form.waitMsgTemplateId" @change="changeWaitMsg" class="m-2" placeholder="请选择消息模板">
										<el-option
											v-for="item in messageList"
											:key="item.id"
											:label="item.templateName"
											:value="item.id"
										/>
									</el-select>
								</el-form-item>
								<el-form-item label="参数设置" v-if="form.waitMsg=='on'">
									<jd-form-table v-model="form.waitMsgTemplateParam"  :addBtn="false" placeholder="暂无数据">
										<el-table-column prop="val" label="参数名">
											<template #default="scope">
												<el-input v-model="scope.row.field" placeholder="" readonly></el-input>
											</template>
										</el-table-column>
										<el-table-column prop="open" label="表单字段" align="center">
											<template #default="scope">
												<el-select style="width: 200px" v-model="scope.row.defaultValue" placeholder="">
													<el-option
														v-for="item in msgParams"
														:key="item.value"
														:label="item.label"
														:value="item.value"
													/>
												</el-select>
											</template>
										</el-table-column>
									</jd-form-table>
								</el-form-item>
								<el-form-item label="流程结束">
									<el-select style="width: 100%" v-model="form.endMsg">
										<el-option
											v-for="item in msgConfig"
											:key="item.value"
											:label="item.label"
											:value="item.value"
										/>
									</el-select>
								</el-form-item>

								<el-form-item label="消息模板" v-if="form.endMsg=='on'">
									<el-select style="width: 100%" v-model="form.endTemplateId" @change="changeEndMsg" class="m-2" placeholder="请选择消息模板">
										<el-option
											v-for="item in messageList"
											:key="item.id"
											:label="item.templateName"
											:value="item.id"
										/>
									</el-select>
								</el-form-item>
								<el-form-item label="参数设置" v-if="form.endMsg=='on'">
									<jd-form-table v-model="form.endMsgTemplateParam"  :addBtn="false" placeholder="暂无数据">
										<el-table-column prop="val" label="参数名">
											<template #default="scope">
												<el-input v-model="scope.row.field" placeholder="" readonly></el-input>
											</template>
										</el-table-column>
										<el-table-column prop="open" label="表单字段" align="center">
											<template #default="scope">
												<el-select style="width: 200px" v-model="scope.row.defaultValue" placeholder="">
													<el-option
														v-for="item in msgParams"
														:key="item.value"
														:label="item.label"
														:value="item.value"
													/>
												</el-select>
											</template>
										</el-table-column>
									</jd-form-table>
								</el-form-item>

								<el-form-item label="节点同意">
									<el-select style="width: 100%" v-model="form.successMsg">
										<el-option
											v-for="item in msgConfig"
											:key="item.value"
											:label="item.label"
											:value="item.value"
										/>
									</el-select>
								</el-form-item>

								<el-form-item label="消息模板" v-if="form.successMsg=='on'">
									<el-select style="width: 100%" v-model="form.successTemplateId" @change="changeSuccessMsg" class="m-2" placeholder="请选择消息模板">
										<el-option
											v-for="item in messageList"
											:key="item.id"
											:label="item.templateName"
											:value="item.id"
										/>
									</el-select>
								</el-form-item>
								<el-form-item label="参数设置" v-if="form.successMsg=='on'">
									<jd-form-table v-model="form.successTemplateParam"  :addBtn="false" placeholder="暂无数据">
										<el-table-column prop="val" label="参数名">
											<template #default="scope">
												<el-input v-model="scope.row.field" placeholder="" readonly></el-input>
											</template>
										</el-table-column>
										<el-table-column prop="open" label="表单字段" align="center">
											<template #default="scope">
												<el-select style="width: 200px" v-model="scope.row.defaultValue" placeholder="">
													<el-option
														v-for="item in msgParams"
														:key="item.value"
														:label="item.label"
														:value="item.value"
													/>
												</el-select>
											</template>
										</el-table-column>
									</jd-form-table>
								</el-form-item>

								<el-form-item label="流程驳回">
									<el-select style="width: 100%" v-model="form.refuseMsg">
										<el-option
											v-for="item in msgConfig"
											:key="item.value"
											:label="item.label"
											:value="item.value"
										/>
									</el-select>
								</el-form-item>

								<el-form-item label="消息模板" v-if="form.refuseMsg=='on'">
									<el-select style="width: 100%" v-model="form.refuseMsgTemplateId" @change="changeRefuseMsg" class="m-2" placeholder="请选择消息模板">
										<el-option
											v-for="item in messageList"
											:key="item.id"
											:label="item.templateName"
											:value="item.id"
										/>
									</el-select>
								</el-form-item>
								<el-form-item label="参数设置" v-if="form.refuseMsg=='on'">
									<jd-form-table v-model="form.refuseMsgTemplateParam"  :addBtn="false" placeholder="暂无数据">
										<el-table-column prop="val" label="参数名">
											<template #default="scope">
												<el-input v-model="scope.row.field" placeholder="" readonly></el-input>
											</template>
										</el-table-column>
										<el-table-column prop="open" label="表单字段" align="center">
											<template #default="scope">
												<el-select style="width: 200px" v-model="scope.row.defaultValue" placeholder="">
													<el-option
														v-for="item in msgParams"
														:key="item.value"
														:label="item.label"
														:value="item.value"
													/>
												</el-select>
											</template>
										</el-table-column>
									</jd-form-table>
								</el-form-item>

								<el-form-item label="流程抄送">
									<el-select style="width: 100%" v-model="form.copyMsg">
										<el-option
											v-for="item in msgConfig"
											:key="item.value"
											:label="item.label"
											:value="item.value"
										/>
									</el-select>
								</el-form-item>

								<el-form-item label="消息模板" v-if="form.copyMsg=='on'">
									<el-select style="width: 100%" v-model="form.copyMsgTemplateId" @change="changeCopyMsg" class="m-2" placeholder="请选择消息模板">
										<el-option
											v-for="item in messageList"
											:key="item.id"
											:label="item.templateName"
											:value="item.id"
										/>
									</el-select>
								</el-form-item>
								<el-form-item label="参数设置" v-if="form.copyMsg=='on'">
									<jd-form-table v-model="form.copyMsgTemplateParam"  :addBtn="false" placeholder="暂无数据">
										<el-table-column prop="val" label="参数名">
											<template #default="scope">
												<el-input v-model="scope.row.field" placeholder="" readonly></el-input>
											</template>
										</el-table-column>
										<el-table-column prop="open" label="表单字段" align="center">
											<template #default="scope">
												<el-select style="width: 200px" v-model="scope.row.defaultValue" placeholder="">
													<el-option
														v-for="item in msgParams"
														:key="item.value"
														:label="item.label"
														:value="item.value"
													/>
												</el-select>
											</template>
										</el-table-column>
									</jd-form-table>
								</el-form-item>
								<el-form-item label="流程通过">
									<el-select style="width: 100%" v-model="form.passMsg">
										<el-option
											v-for="item in msgConfig"
											:key="item.value"
											:label="item.label"
											:value="item.value"
										/>
									</el-select>
								</el-form-item>

								<el-form-item label="消息模板" v-if="form.passMsg=='on'">
									<el-select style="width: 100%" v-model="form.passTemplateId" @change="changePassMsg" class="m-2" placeholder="请选择消息模板">
										<el-option
											v-for="item in messageList"
											:key="item.id"
											:label="item.templateName"
											:value="item.id"
										/>
									</el-select>
								</el-form-item>
								<el-form-item label="参数设置" v-if="form.passMsg=='on'">
									<jd-form-table v-model="form.passMsgTemplateParam"  :addBtn="false" placeholder="暂无数据">
										<el-table-column prop="val" label="参数名">
											<template #default="scope">
												<el-input v-model="scope.row.field" placeholder="" readonly></el-input>
											</template>
										</el-table-column>
										<el-table-column prop="open" label="表单字段" align="center">
											<template #default="scope">
												<el-select style="width: 200px" v-model="scope.row.defaultValue" placeholder="">
													<el-option
														v-for="item in msgParams"
														:key="item.value"
														:label="item.label"
														:value="item.value"
													/>
												</el-select>
											</template>
										</el-table-column>
									</jd-form-table>
								</el-form-item>
							</el-tab-pane>
						</el-tabs>

					</el-form>
				</el-main>
				<el-footer>
					<el-button type="primary" @click="save">保存</el-button>
					<el-button @click="drawer=false">取消</el-button>
				</el-footer>
			</el-container>
		</el-drawer>
	</div>
</template>

<script>
	import addNode from './addNode'

	export default {
		inject: ['select'],
		props: {
			modelValue: { type: Object, default: () => {} }
		},
		components: {
			addNode
		},
		data() {
			return {
				nodeConfig: {},
				drawer: false,
				isEditTitle: false,
				form: {},
				// 应用ID
				appId:null,
				// 填报表单列表
				nodeFormList:[],
				// 数据表单列表
				dataFormList:[],
				// 接口列表
				interFaceList:[],
				// 消息模板列表
				messageList:[],
				// 参数列表
				paramList:[],
				// 表单参数列表
				tableParams:[
					{label:"LaunchUserName(发起人姓名)",value:"LaunchUserName",type:"system"},
					{label:"LaunchUserId(发起人ID)",value:"LaunchUserId",type:"system"},
					{label:"OperatorUserName(当前操作用户名称)",value:"OperatorUserName",type:"system"},
					{label:"OperatorUserId(当前操作用户Id)",value:"OperatorUserId",type:"system"},
				],
				// 消息配置
				msgConfig:[
					{label:"关闭",value:"off",type:"system"},
					{label:"自定义",value:"on",type:"system"},
				],
				// 表单参数列表
				msgParams:[
					{label:"LaunchUserName(发起人姓名)",value:"LaunchUserName",type:"system"},
					{label:"LaunchUserId(发起人ID)",value:"LaunchUserId",type:"system"},
					{label:"OperatorUserName(当前操作用户名称)",value:"OperatorUserName",type:"system"},
					{label:"OperatorUserId(当前操作用户Id)",value:"OperatorUserId",type:"system"},
				],

			}
		},
		watch:{
			modelValue(){
				this.nodeConfig = this.modelValue
			}
		},
		mounted() {
			this.appId = this.$route.query.appId;
			this.nodeConfig = this.modelValue
			this.getInterFaceList();
			this.getMessageTemplateList();
		},
		methods: {
			show(){
				this.form = {}
				this.form = JSON.parse(JSON.stringify(this.nodeConfig))
				this.isEditTitle = false
				this.getNodeFormList();
				this.getDataFormList();
				this.drawer = true
			},
			// 根据填报表单获取填报表单选项
			async getNodeFormList() {
				let res = await this.$API.app.form.getFormByAppId.get(this.appId,1);
				if (res.code == 200){
					this.nodeFormList =res.data;
				}
			},
			// 根据填报表单获取数据表单选项
			async getDataFormList() {
				let res = await this.$API.app.form.getFormByAppId.get(this.appId,2);
				if (res.code == 200){
					this.dataFormList =res.data;
				}
			},
			// 获取消息模板
			async getMessageTemplateList() {
				let form = {}
				form.appId = this.appId;
				let res = await this.$API.system.template.getUserTemplate.get(form);
				if (res.code == 200){
					this.messageList = res.data;
				}
			},
			// 根据应用获取接口列表
			async getInterFaceList() {
				let res = await this.$API.app.interface.getDetailByAppId.get(this.appId);
				if (res.code == 200){
					this.interFaceList =res.data;
				}
			},
			// 表单选择改变
			async changeForm(val) {
				let res = await this.$API.app.form.getDetails.get(val);
				if (res.code == 200){
					if (this.nodeConfig.type == 0){
						let list = JSON.parse(res.data.formTemplate);
						list.map((item)=>{
							item.write=true;
							item.read=true;
							item.required=false;
							 this.form.formOption.push(item)
						})
					}
				}
			},
			// 数据表单下拉改变
			async changeDataForm(val) {
				let res = await this.$API.app.form.getDetails.get(val);
				if (res.code == 200){
					let form =JSON.parse( res.data.formTemplate)
					form.formItems.map((item)=>{
						console.log(item)
					})
				}
			},
			// 发起事件接口改变
			async changeLaunch(val) {
				let res = await this.$API.app.interface.getParams.get(val);
				if (res.code == 200){
					res.data.map((item)=>{
						item.defaultValue = null;
					})
					this.form.launchParam =res.data;
				}
			},
			// 结束事件改变
			async endLaunch(val){
				let res = await this.$API.app.interface.getParams.get(val);
				if (res.code == 200){
					res.data.map((item)=>{
						item.defaultValue = null;
					})
					this.form.endParam =res.data;
				}
			},
			// 撤回事件改变
			async changeRecall(val){
				let res = await this.$API.app.interface.getParams.get(val);
				if (res.code == 200){
					res.data.map((item)=>{
						item.defaultValue = null;
					})
					this.form.recallEventParam =res.data;
				}
			},
			// 待办消息改变
			async changeWaitMsg(val) {
				let res = await this.$API.system.template.getTemplate.get(val);
				if (res.code == 200){
					this.form.waitMsgTemplateParam =JSON.parse(res.data.parameter)
				}
			},
			// 同意消息改变
			async changeSuccessMsg(val) {
				let res = await this.$API.system.template.getTemplate.get(val);
				if (res.code == 200){
					this.form.successTemplateParam =JSON.parse(res.data.parameter)
				}
			},
			// 拒绝消息改变
			async changeRefuseMsg(val) {
				let res = await this.$API.system.template.getTemplate.get(val);
				if (res.code == 200){
					this.form.refuseMsgTemplateParam =JSON.parse(res.data.parameter)
				}
			},
			// 抄送消息改变
			async changeCopyMsg(val) {
				let res = await this.$API.system.template.getTemplate.get(val);
				if (res.code == 200){
					this.form.copyMsgTemplateParam =JSON.parse(res.data.parameter)
				}
			},
			// 抄送消息改变
			async changePassMsg(val) {
				let res = await this.$API.system.template.getTemplate.get(val);
				if (res.code == 200){
					this.form.passMsgTemplateParam =JSON.parse(res.data.parameter)
				}
			},
			// 结束消息改变
			async changeEndMsg(val) {
				let res = await this.$API.system.template.getTemplate.get(val);
				if (res.code == 200){
					this.form.endMsgTemplateParam =JSON.parse(res.data.parameter)
				}
			},
			// 加载参数
			async notice(tab,env){
				if ("fifth" == tab.paneName){
					let dataForm = this.form.dataForm;
					let nodeForm = this.form.nodeForm;
					if (null != dataForm){
						 await this.pushMsgParam(dataForm);
					}
					if (null != nodeForm){
						await this.pushMsgParam(nodeForm);

					}

				}
			},
			// 添加表单参数字段
			async pushMsgParam(id) {
				let res = await this.$API.app.form.get.get(id);
				if (res.code == 200) {
					let temp = JSON.parse(res.data.formTemplate)
					for (let i = 0; i < temp.formFields.length; i++) {
						for (let j = 0; j < temp.formFields[i].fields.length; j++) {
							let field = temp.formFields[i].fields[j]
							this.msgParams.push({
								label: "(" + field.field + ")" + field.fieldName,
								value: field.field,
								type: "form"
							},)
						}
					}
				}
			},
			editTitle(){
				this.isEditTitle = true
				this.$nextTick(()=>{
					this.$refs.nodeTitle.focus()
				})
			},
			saveTitle(){
				this.isEditTitle = false
			},
			selectHandle(type, data){
				this.select(type, data)
			},
			delRole(index){
				this.form.nodeRoleList.splice(index, 1)
			},
			save(){
				this.$emit("update:modelValue", this.form)
				this.drawer = false
			},
			toText(nodeConfig){
				if(nodeConfig.nodeRoleList && nodeConfig.nodeRoleList.length > 0){
					return nodeConfig.nodeRoleList.map(item=>item.name).join("、")
				}else{
					return "所有人"
				}
			}
		}
	}
</script>

<style>
</style>
